<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <!-- Author -->
    <meta name="author" content="Themes Industry">
    <!-- description -->
    <meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with 8 ready home page demos.">
    <!-- keywords -->
    <meta name="keywords" content="creative, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, studio, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, studio, masonry, grid, faq">
    <!-- Page Title -->
    <title>Barber | MegaOne HTML5 Template</title>
    <!-- Favicon -->
   
    <!-- Bundle -->
    <link href="static/css/bundle.min.css" rel="stylesheet">
    <!-- Plugin Css -->
    <link href="static/css/LineIcons.min.css" rel="stylesheet">
    <link href="static/css/revolution-settings.min.css" rel="stylesheet">
    <link href="static/css/jquery.fancybox.min.css" rel="stylesheet">
    <link href="static/css/owl.carousel.min.css" rel="stylesheet">
    <link href="static/css/cubeportfolio.min.css" rel="stylesheet">
    <!-- Style Sheet -->
    <link href="static/css/navigation.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="90">

<!-- Preloader -->
<div class="preloader">
    <div class="centrize full-width">
        <div class="vertical-center">
            <div class="cssload-thecube">
                <div class="cssload-cube cssload-c1"></div>
                <div class="cssload-cube cssload-c2"></div>
                <div class="cssload-cube cssload-c4"></div>
                <div class="cssload-cube cssload-c3"></div>
            </div>
        </div>
    </div>
</div>
<!-- Preloader End -->

<!--Header Start-->
<header>

    <!--Navigation-->
    <nav class="navbar navbar-top-default navbar-expand-lg navbar-simple nav-line">
        <div class="container">
            <a href="#home" title="Logo" class="logo scroll">
                <!--Logo Default-->
                <img src="static/picture/logo-white.png" alt="logo" class="logo-white">
                <img src="static/picture/logo.png" alt="logo" class="logo-dark">
            </a>

            <!--Nav Links-->
            <div class="collapse navbar-collapse" id="megaone">
                <div class="navbar-nav ml-auto">
                    <a class="nav-link active scroll" href="#rev-slider">主页</a>
                    <a class="nav-link scroll" href="#about">About</a>
                    <a class="nav-link scroll" href="#prices">Shop</a>
                    <a class="nav-link scroll" href="#portfolio">Gallary</a>
                    <a class="nav-link scroll" href="#team">Our Team</a>
                    <a class="nav-link scroll" href="#client">Reviews</a>
                    <a class="nav-link scroll" href="#contact">Contact</a>
                </div>
            </div>

            <!--Side Menu Button-->
            <a href="javascript:void(0)" class="sidemenu_btn" id="sidemenu_toggle">
                <span></span>
                <span></span>
                <span></span>
            </a>

        </div>
    </nav>

    <!--Side Nav-->
    <div class="side-menu hidden">
        <div class="inner-wrapper">
            <span class="btn-close" id="btn_sideNavClose"><i></i><i></i></span>
            <nav class="side-nav w-100">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#rev-slider">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#prices">Shop</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#portfolio">Gallary</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#team">Our Team</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#client">Reviews</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </nav>

            <div class="side-footer w-100">
                <ul class="social-icons-simple">
                    <li><a class="facebook-text-hvr" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
                    <li><a class="instagram-text-hvr" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
                    <li><a class="twitter-text-hvr" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
                </ul>
                <p>&copy; 2020 MegaOne. Made With Love by Themesindustry</p>
            </div>
        </div>
    </div>
    <a id="close_side_menu" href="javascript:void(0);"></a>
    <!-- End side menu -->

</header>
<!--Header End-->

<!--Home Start-->
<div id="rev-slider" class="rev-slider">

    <!-- START REVOLUTION SLIDER -->
    <div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="slider-shop" data-source="gallery" style="background:rgba(255,255,255,0);padding:0px;">
       <div id="rev_slider_1_5" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.8.1">
                <ul>
                    <!-- SLIDE  -->
                    <li data-index="rs-3" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="assets/100x50_44515-slider-bg-3.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide 3" data-param1="01" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="static/picture/slider1.jpg" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 0" data-bgparallax="10" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgposition="center center" class="rev-slidebg" alt="slider-image" data-no-retina="">
                        <div class="slider-overlay"></div>
                        <!-- LAYERS -->

                        <!-- LAYER NR. 11 -->
                        <div class="tp-caption   tp-resizeme rs-parallaxlevel-2" id="slide-3-layer-1" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-120','-115','-114','-114']" data-fontsize="['16','14','14','14']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 5; white-space: nowrap; font-size: 16px; line-height: 22px; font-weight: 500; color: #eaeaef;font-family:'Roboto', sans-serif;"></div>

                        <!-- LAYER NR. 12 -->
                        <div class="tp-caption   tp-resizeme rs-parallaxlevel-3" id="slide-3-layer-2" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-62','-62','-62','-62']" data-fontsize="['80','60','50','40']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power2.easeOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 6; white-space: nowrap; font-size: 90px; line-height: 16px; font-weight: 600; color: #ffffff; letter-spacing: 0px;font-family: 'Oswald', sans-serif; text-transform: uppercase">十六年再夺冠，玫瑰何以铿锵</div>

                        <!-- LAYER NR. 13 -->
                        <div class="tp-caption   tp-resizeme rs-parallaxlevel-2" id="slide-3-layer-3" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['10','0','0','0']" data-fontsize="['18','18','16','16']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 7; white-space: nowrap; font-size: 18px; line-height: 22px; font-weight: 500; color: #eaeaef; font-family:'Roboto', sans-serif;"></div>

                        <div class="tp-caption rev-btn  rs-parallaxlevel-2" id="slide-3-layer-4" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['62','62','53','50']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-responsive="off" data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"x:-50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 11; max-width:960px; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 600; color: #ffffff; letter-spacing: 0px;font-family: 'Roboto', sans-serif;"><a href="#" class="btn white-trans-btn-with-white-btn scroll">数说中国女足</a>
                        </div>

                    </li>
                </ul>
                <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div></div>
    </div>
    <!-- END REVOLUTION SLIDER -->

</div>
<!--Home End-->

<!--About Star-->
<section id="about">
    <div class="container">
        <div class="row dot-box">
            
            <!-- Heading Area-->
            <div class="col-lg-6 order-lg-2">
                <div class="heading-area pl-lg-4 p-0">
                    <h6 class="sub-title main-color">Why Love Us</h6>
                    <h2 class="title">ABOUT US STORY</h2>
                    <p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.
                    <!--List-->
                    <ul class="about-list">
                        <li><i class="lni-check-mark-circle a-icon"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                        <li><i class="lni-check-mark-circle a-icon"></i> Morbi ornare nibh id cursus vestibulum.</li>
                        <li><i class="lni-check-mark-circle a-icon"></i> Duis vitae lectus facilisis, tristique lorem sit amet males.</li>
                        <li><i class="lni-check-mark-circle a-icon"></i> It is a long established fact that a distracted</li>
                    </ul>
                </div>
            </div>
            

            <!-- Features Box-->
            <div class="col-lg-6">
                <!--About Image-->
                <div class="about-image js-tilt">
                    <img src="static/picture/about-img.jpg" alt="about-img">
                </div>
            </div>

        </div>
        <div class="row dot-box">

            <!-- Heading Area-->
            <div class="col-lg-6 order-lg-2">
                <div class="heading-area pl-lg-4 p-0">
                    <h6 class="sub-title main-color">Why Love Us</h6>
                    <h2 class="title">ABOUT US STORY</h2>
                    <p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.
                    <!--List-->
                    <ul class="about-list">
                        <li><i class="lni-check-mark-circle a-icon"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                        <li><i class="lni-check-mark-circle a-icon"></i> Morbi ornare nibh id cursus vestibulum.</li>
                        <li><i class="lni-check-mark-circle a-icon"></i> Duis vitae lectus facilisis, tristique lorem sit amet males.</li>
                        <li><i class="lni-check-mark-circle a-icon"></i> It is a long established fact that a distracted</li>
                    </ul>
                </div>
            </div>
            

            <!-- Features Box-->
            <div class="col-lg-6">
                <!--About Image-->
                <div class="about-image js-tilt">
                    <img src="static/picture/about-img.jpg" alt="about-img">
                </div>
            </div>

        </div>

    </div>
</section>
<!--About End-->

<!--Parallax Start-->
<section class="parallax bg-img1">
    <div class="bg-overlay bg-light-black opacity-7"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-sm-6">
                <div class="parallax-box text-white">
                    <i class="far fa-smile-beam" aria-hidden="true"></i>
                    <h2 class="count">1300</h2>
                    <h5>Happy Client</h5>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="parallax-box text-white">
                    <i class="fas fa-store-alt" aria-hidden="true"></i>
                    <h2 class="count">115</h2>
                    <h5>Total Branches</h5>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="parallax-box text-white">
                    <i class="fa fa-globe" aria-hidden="true"></i>
                    <h2 class="count">250</h2>
                    <h5>Treatments</h5>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="parallax-box text-white">
                    <i class="fa fa-gift" aria-hidden="true"></i>
                    <h2 class="count">102</h2>
                    <h5>Award Winners</h5>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Parallax End-->

<!--start Shop Prices-->
<section id="prices" class="prices">
    <div class="container">
        <!--Heading-->
        <div class="row">
            <div class="col-md-12 text-center">
                <!--Heading-->
                <div class="heading-area mx-570 pb-5">
                    <h6 class="sub-title main-color">Check Our Plans & Pricing </h6>
                    <h2 class="title m-0">OUR PRICES</h2>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-md-6">

                <div class="price-list ml-0">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">MEN’S HAIRCUT</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$85</p>
                    </div>
                </div>
                <div class="price-list ml-0">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">BEARD LINEUP</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$35</p>
                    </div>
                </div>
                <div class="price-list ml-0">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">TAPER HAIRCUT</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$80</p>
                    </div>
                </div>
                <div class="price-list ml-0">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">CUSTOM HAIRCUT</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$70</p>
                    </div>
                </div>
                <div class="price-list ml-0">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">HEAD LINEUP</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$120</p>
                    </div>
                </div>

            </div>

            <div class="col-12 col-md-6">

                <div class="price-list">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">CLEAN SHAVE</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$30</p>
                    </div>
                </div>
                <div class="price-list">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">MEN’S FACIAL</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$60</p>
                    </div>
                </div>
                <div class="price-list">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">HAIR CURLING</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$25</p>
                    </div>
                </div>
                <div class="price-list">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">HIGHLIGHT COLOR</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$70</p>
                    </div>
                </div>
                <div class="price-list">
                    <div class="rates d-flex justify-content-between">
                        <div class="info">
                            <h6 class="main-heading text-grey font-weight-bold">MEN’S BLEACH</h6>
                            <h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
                        </div>
                        <p class="rate text-brown">$50</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<!--end Shop Prices-->

<!--Portfolio Start-->
<section id="portfolio" class="cube-portfolio1 text-center no-transition portfolio">

        <!--Heading-->
        <div class="portfolio-details heading-area mx-570 pb-lg-5">
            <h6 class="sub-title main-color">See Our Amazing Work</h6>
            <h2 class="title">OUR GALLERY</h2>
            <p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form.

                <!--Portfolio Filters-->
            <div id="js-filters-mosaic-flat" class="cbp-l-filters-button">

                <div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
                <span class="text-blue">/</span>
                <div data-filter=".hairstyle" class="cbp-filter-item">Hair Style</div>
                <span class="text-blue"> / </span>
                <div data-filter=".beardstyle" class="cbp-filter-item">Beard Styles</div>
                <span class="text-blue"> / </span>
                <div data-filter=".hairwash" class="cbp-filter-item">Hair Wash</div>
                <span class="text-blue"> / </span>
                <div data-filter=".facemask" class="cbp-filter-item">Face Mask</div>
            </div>

        </div>

        <!--Portfolio Items-->
        <div id="js-grid-mosaic-flat" class="cbp cbp-l-grid-mosaic-flat">

            <div class="cbp-item hairstyle">
                <a href="static/picture/work-1.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-1.jpg" alt="image" width="380" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Styling Beard</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item beardstyle beardstyle">
                <a href="static/picture/work-2.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-2.jpg" alt="image" width="380" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Face Mask</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item beardstyle">
                <a href="static/picture/work-3.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-3.jpg" alt="image" width="760" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Styling Hair Cut</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item hairstyle facemask">
                <a href="static/picture/work-4.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-4.jpg" alt="image" width="380" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Hair Style</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item beardstyle">
                <a href="static/picture/work-10.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-10.jpg" alt="image" width="760" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Hair Curling</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item hairstyle hairwash">
                <a href="static/picture/work-5.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-5.jpg" alt="image" width="380" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Taper Haircut</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item beardstyle hairwash">
                <a href="static/picture/work-6.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-6.jpg" alt="image" width="760" height="720">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Stylish Hair</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item facemask">
                <a href="static/picture/work-11.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-11.jpg" alt="image" width="380" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Hair Spray</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item hairstyle">
                <a href="static/picture/work-12.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-12.jpg" alt="" width="380" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Custom Hair Cut</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item hairwash">
                <a href="static/picture/work-9.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-9.jpg" alt="image" width="380" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Perfectionist</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item hairstyle hairwash">
                <a href="static/picture/work-8.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-8.jpg" alt="image" width="380" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Latest Work</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="cbp-item hairstyle facemask">
                <a href="static/picture/work-7.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
                    <div class="cbp-caption-defaultWrap">
                        <img src="static/picture/work-7.jpg" alt="image" width="760" height="360">
                    </div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignLeft">
                            <div class="cbp-l-caption-body">
                                <div class="plus"></div>
                                <h5 class="text-white mb-1">Staff</h5>
                                <p class="text-white">See Our Amazing Work</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>


        </div>

</section>
<!--Portfolio end-->

<!--Team Start-->
<section id="team">
    <div class="container">
        <div class="row align-items-lg-end">
            <div class="col-lg-6">
                <div class="heading-area pr-lg-5">
                    <h6 class="sub-title main-color">Let's Meet To Our Awesome Team</h6>
                    <h2 class="title">WE HAVE CREATIVE & EXPERT TEAM</h2>
                    <p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form.
                </p></div>
            </div>
            <div class="col-lg-6">
                <!-- Progress Bar -->
                <ul class="services-skill text-left">
                    <!--Progress Item-->
                    <li class="progress-item">
                        <h6>HAIR STYLING<span class="float-right"><b class="count">100</b>%</span></h6>
                        <div class="progress">
                            <span class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></span>
                        </div>
                    </li>
                    <!--Progress Item-->
                    <li class="progress-item">
                        <h6>BEARD STYLING<span class="float-right"><b class="count">95</b>%</span></h6>
                        <div class="progress">
                            <span class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></span>
                        </div>
                    </li>
                    <!--Progress Item-->
                    <li class="progress-item">
                        <h6>FACE MASK<span class="float-right"><b class="count">90</b>%</span></h6>
                        <div class="progress">
                            <span class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></span>
                        </div>
                    </li>
                    <!--Progress Item-->
                    <li class="progress-item">
                        <h6>LICENSED BARBERS<span class="float-right"><b class="count">100</b>%</span></h6>
                        <div class="progress">
                            <span class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row mt-lg-5 pt-lg-5">
            <div class="col-lg-4 col-md-6">
               <div class="team-item">
                   <img src="static/picture/team-img-1.jpg" alt="team">
                   <div class="team-detail">
                       <h5 class="m-0">David Manager</h5>
                       <p class="mb-2">Expert Barber</p>
                       <ul class="social-icon social-icon-clr-hvr">
                           <li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
                           <li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
                           <li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
                           <li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
                       </ul>
                   </div>
               </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="team-item">
                    <img src="static/picture/team-img-2.jpg" alt="team">
                    <div class="team-detail">
                        <h5 class="m-0">Mike Kongal</h5>
                        <p class="mb-2">Founder & Boss Barber</p>
                        <ul class="social-icon social-icon-clr-hvr">
                            <li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="team-item">
                    <img src="static/picture/team-img-3.jpg" alt="team">
                    <div class="team-detail">
                        <h5 class="m-0">Alex Dian</h5>
                        <p class="mb-2">Expert Barber</p>
                        <ul class="social-icon social-icon-clr-hvr">
                            <li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Team End-->

<!--START BRANDS-->
<section class="bg-light">
    <div class="container">
        <!--Partner Slider-->
        <div class="owl-carousel partners-slider">
            <div class="logo-item"> <img alt="client-logo" src="static/picture/brand1.png"></div>
            <div class="logo-item"> <img alt="client-logo" src="static/picture/brand1.png"></div>
            <div class="logo-item"> <img alt="client-logo" src="static/picture/brand1.png"></div>
            <div class="logo-item"> <img alt="client-logo" src="static/picture/brand1.png"></div>

        </div>
    </div>
</section>
<!--END BRANDS-->

<!-- Client start -->
<section id="client" class="parallax bg-img2">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 offset-lg-6 wow fadeInRight">
                <div class="owl-carousel owl-theme testimonial-two">
                    <div class="testimonial-item">
                        <p class="testimonial-para"> Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus. Nam porttitor justo sed mi finibus, vel tristique risus faucibus. </p>

                        <div class="testimonial-post">
                            <a href="javascript:void(0)" class="post"><img src="static/picture/testimonial-1.jpg" alt="image"></a>
                            <div class="text-content">
                                <h5>Janey Williams</h5>
                                <p class="mb-0">Customer</p>
                                <div class="rating">
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-item">
                        <p class="testimonial-para"> Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus. Nam porttitor justo sed mi finibus, vel tristique risus faucibus. </p>

                        <div class="testimonial-post">
                            <a href="javascript:void(0)" class="post"><img src="static/picture/testimonial-2.jpg" alt="image"></a>
                            <div class="text-content">
                                <h5>Glen Jarret</h5>
                                <p class="m-0">Customer </p>
                                <div class="rating">
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-item">
                        <p class="color-black testimonial-para mb-15px"> Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus. Nam porttitor justo sed mi finibus, vel tristique risus faucibus. </p>

                        <div class="testimonial-post">
                            <a href="javascript:void(0)" class="post"><img src="static/picture/testimonial-3.jpg" alt="image"></a>
                            <div class="text-content">
                                <h5>Kate Lawrence</h5>
                                <p class="m-0">Customer</p>
                                <div class="rating">
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                    <i class="lni-star-filled"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Client ends -->

<!--Contact Start-->
<section id="contact">
    <div class="container">
        <!--Heading-->
        <div class="row">
            <div class="col-md-12 text-center">
                <!--Heading-->
                <div class="heading-area mx-570 pb-5">
                    <h6 class="sub-title main-color">For Support Contact Us</h6>
                    <h2 class="title m-0">LET'S GET IN TOUCH</h2>
                </div>
            </div>
        </div>

        <!--contact us-->
        <form class="contact-form" id="contact-form-data">
            <div class="row">

                <div class="col-sm-12" id="result"></div>

                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="First Name:" required="" id="firstName" name="firstName">
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="Last Name:" required="" id="lastName" name="lastName">
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                        <input class="form-control" type="email" placeholder="Email:" required="" id="userEmail" name="userEmail">
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                        <input class="form-control" type="tel" placeholder="Phone:" required="" id="userPhone" name="userPhone">
                    </div>
                </div>
                <div class="col-md-12 col-sm-12">
                    <div class="form-group">
                        <textarea class="form-control" placeholder="Message" required="" id="userMessage" name="userMessage"></textarea>
                    </div>
                </div>
                <div class="col-sm-12">
                    <button type="button" class="btn btn-large black-trans-btn-with-orange-btn mt-4 contact_btn"> <i class="fa fa-spinner fa-spin mr-2 d-none" aria-hidden="true"></i> Contact Now</button>
                </div>
            </div>
        </form>
    </div>
</section>
<!--Contact End-->

<!--Footer Start-->
<footer class="footer-style-1 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <!--Social-->
            <div class="col-lg-6">
                <div class="footer-social text-lg-left">
                    <ul class="list-unstyled">
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-facebook-f"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-twitter"></i></a></li>
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-google-plus-g"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-linkedin-in"></i></a></li>
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-instagram"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-pinterest-p"></i></a></li>
                    </ul>
                </div>
            </div>
            <!--Text-->
            <div class="col-lg-6 text-lg-right">
                <p class="company-about fadeIn">Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                </p>
            </div>
        </div>
    </div>
</footer>
<!--Footer End-->

<!--Scroll Top Start-->
<span class="scroll-top-arrow"><i class="fas fa-angle-up"></i></span>
<!--Scroll Top End-->

<!-- JavaScript -->
<script src="static/js/bundle.min.js"></script>
<!-- Plugin Js -->
<script src="static/js/jquery.appear.js"></script>
<script src="static/js/jquery.fancybox.min.js"></script>
<script src="static/js/owl.carousel.min.js"></script>
<script src="static/js/parallaxie.min.js"></script>
<script src="static/js/wow.min.js"></script>
<script src="static/js/jquery.cubeportfolio.min.js"></script>
<!-- REVOLUTION JS FILES -->
<script src="static/js/jquery.themepunch.tools.min.js"></script>
<script src="static/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION EXTENSIONS -->
<script src="static/js/revolution.extension.actions.min.js"></script>
<script src="static/js/revolution.extension.carousel.min.js"></script>
<script src="static/js/revolution.extension.kenburn.min.js"></script>
<script src="static/js/revolution.extension.layeranimation.min.js"></script>
<script src="static/js/revolution.extension.migration.min.js"></script>
<script src="static/js/revolution.extension.migration.min.js"></script>
<script src="static/js/revolution.extension.parallax.min.js"></script>
<script src="static/js/revolution.extension.slideanims.min.js"></script>
<script src="static/js/revolution.extension.video.min.js"></script>
<!-- google map
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJRG4KqGVNvAPY4UcVDLcLNXMXk2ktNfY"></script> -->
<script src="static/js/map.js"></script>
<!--Tilt Js-->
<script src="static/js/tilt.jquery.min.js"></script>
<script src="static/js/contact_us.js"></script>
<!-- custom script-->
<script src="static/js/script.js"></script>

</body>
</html>